<template>
  <div class="divBox" >
    <div class="el-card">
      <div class="title" style="margin: 30px;text-align: center;font-size: 28px;font-weight: bold;">
        <span>试验日志</span>
      </div>
      <template>
        <el-form ref="placeCodeForm" v-loading="formLoading" :rules="rules" :model="info" label-position="top">

        <table class="table"  border="1" cellspacing="0" style="text-align: center;margin: auto;width: 70%;font-size: 20px;">
          <tr>
            <td width="25%" colspan="2">试验名称</td>
            <td colspan="3">
              <el-input v-model="info.name" maxlength="100"  />
            </td>
          </tr>
          <tr>
            <td width="25%" colspan="2">型号</td>
            <td><el-input v-model="info.modelCode" maxlength="100"  /></td>
            <td width="15%">日期</td>
            <td><el-input v-model="info.testTime" maxlength="100"  /></td>
          </tr>
          <tr>
            <td width="25%" colspan="2">参试单位</td>
            <td colspan="5"><el-input v-model="info.unit" maxlength="100"/></td>
          </tr>
          <tr style="height: 150px">
            <td width="10%">试<br>验<br>科<br>目</td>
            <td colspan="5"><el-input v-model="info.subject"  type="textarea" :rows="7"/></td>
          </tr>
          <tr style="height: 350px">
            <td width="10%">试<br>验<br>内<br>容<br>和<br>结<br>果</td>
            <td colspan="5"><el-input v-model="info.content"  type="textarea" :rows="16"/></td>
          </tr>
          <tr>
            <td width="10%">备<br>注</td>
            <td colspan="5"><el-input v-model="info.notes" type="textarea" :rows="2"/></td>
          </tr>
          <tr>
            <td width="25%" colspan="2">人员</td>
            <td colspan="6"><el-input v-model="info.personnel" maxlength="100"/></td>
          </tr>
          <tr>
            <td width="25%" colspan="2">编写</td>
            <td><el-input v-model="info.compile" maxlength="100"  /></td>
            <td width="15%">组织</td>
            <td colspan="2"><el-input v-model="info.organize" maxlength="100"  /></td>
          </tr>
        </table>
          <div style="display: flex;justify-content: flex-end;align-items: center;margin-top: 20px;margin-right: 250px">
            请选择文件存储位置：
            <el-cascader v-model="form.pid" :options="tree" :props="{checkStrictly:true,value:'id',label:'name',children:'child',emitPath:false}"
                         filterable clearable
                         :disabled="form.pid===0"
            >
            </el-cascader>
          </div>
        <div><el-button size="mini" icon="el-icon-check" type="primary" class="but" style="float:right;margin-right: 250px;margin-top: 30px;margin-bottom: 30px;"  @click="submit()">提交
        </el-button></div>
        </el-form>
      </template>
    </div>

  </div>
</template>

<script>

  import { testLogApi } from '@/api/tests'
  import { getTree } from '@/api/categoryApi'

  export default {
    data(){
      return {
        form:{
          id:null,
          pid:null,
          name:'',
          sort:0,
        },
        tree:[],
        info:{
          pid:'',
          name: '',
          modelCode: '',
          testTime: '',
          unit: '',
          subject: '',
          content: '',
          personnel: '',
          notes:'',
          compile: '',
          organize: '',
        },
        rules: {
          name: [{ required: true, trigger: 'blur', message: '请输入试验名称' }],
          modelCode: [{ required: true, trigger: 'blur', message: '请输入型号' }],
          testTime: [{ required: true, trigger: 'blur', message: '请输入时间' }],
          unit: [{ required: true, trigger: 'blur', message: '请输入参试单位' }],
          subject: [{ required: true, trigger: 'blur', message: '请输入试验科目' }],
          content: [{ required: true, trigger: 'blur', message: '请输入试验内容和结果' }],
          personnel: [{ required: true, trigger: 'blur', message: '请输入人员' }],
          compile: [{ required: true, trigger: 'blur', message: '请输入编写' }],
          notes: [{ required: true, trigger: 'blur', message: '请输入备注' }],
          organize: [{ required: true, trigger: 'blur', message: '请输入组织' }],
        },
        formLoading: false,

      }
    },
    mounted() {
      this.getTree()
    },
    methods:{
      getTree(){
        this.treeLoading=true
        getTree({pid:8}).then(res=>{
          if(this.pid){
            this.form.pid=this.pid
          }
          this.tree=res;
        }).finally(()=>{
          this.treeLoading=false
        })
      },
      submit(){
        this.$refs.placeCodeForm.validate(valid => {
          if(!this.info.name)
          {
            this.$message.error('请输入试验名称');
            return
          }
          if(!this.info.modelCode)
          {
            this.$message.error('请输入型号');
            return
          }
          if(!this.info.testTime)
          {
            this.$message.error('请输入时间');
            return
          }
          if(!this.info.unit)
          {
            this.$message.error('请输入参试单位');
            return
          }
          if(!this.info.subject)
          {
            this.$message.error('请输入试验科目');
            return
          }
          if(!this.info.content)
          {
            this.$message.error('请输入试验内容和结果');
            return
          }
          if(!this.info.personnel)
          {
            this.$message.error('请输入人员');
            return
          }
          if(!this.info.compile)
          {
            this.$message.error('请输入编写');
            return
          }
          if(!this.info.notes)
          {
            this.$message.error('请输入备注');
            return
          }
          if(!this.info.organize)
          {
            this.$message.error('请输入组织');
            return
          }
          if(this.form.pid ==null)
          {
            this.$message.error('请选择文件存储位置');
            return
          }else {
            this.info.pid = this.form.pid
          }
            const loading=this.$loading({
              text:'提交中'
            })
            const form=JSON.parse(JSON.stringify(this.info));
            testLogApi(form).then((res)=>{
              this.downloadFile1(res);
              this.$message.success('保存成功');
            }).catch(()=>{
              this.$message.error('保存失败');
            }).finally(()=>{
              loading.close();
            })

        })
      },
      downloadFile1(url) {
        const a = document.createElement('a');
        a.href = url; // 文件链接
        a.download = url; // 文件名，跨域资源download无效
        a.target = '_blank';
        a.click();
        a.remove();
      },
    }
  }

</script>

<style lang="scss" scoped>

.divBox{
  padding: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .title{
    margin: 30px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
  }
  .table{
    text-align: center;
    margin: auto;
    width: 70%;
    font-size: 20px;
  }
  .but{
    float:right;
    margin-right: 250px;
    margin-top: 30px;
    margin-bottom: 30px;

  }
}
</style>
